import React, { Component } from 'react';
import {  Flex, WingBlank,WhiteSpace,Icon,Badge } from 'antd-mobile';
import { myOrder } from './myOrder.less';
import {routerRedux} from "dva/router";
import {connect} from "dva";
import ordersvg from "../../assets/img/order.svg";
import rightsvg from "../../assets/img/right.svg";
import receivablessvg from "../../assets/img/receivables.svg";
import receive_goodssvg from "../../assets/img/receive_goods.svg";
import evaluatedsvg from "../../assets/img/evaluated.svg";
import customersvg from "../../assets/img/customer.svg";

class MyOrder extends Component {


    render() {
        const { data } = this.props;
        return (
            <div className={myOrder} style={data.haveStore ==1?{marginTop:".25rem"}:{}}>
                <WingBlank>
                    <WhiteSpace size="sm"/>
                    <Flex justify="between" style={{borderBottom:"1px solid #e5e5e5",padding:".2rem 0"}}>
                        <Flex>
                            <Icon className="order_logo" type={ordersvg.id}/>
                            <div>我的订单</div>
                        </Flex>
                        <Flex onClick={()=>{
                            if(this.props.token!=null){
                            this.props.dispatch(routerRedux.push({
                                pathname: `/orderList/${0}`,
                            }));}
                        }}>
                            <div className="all_order">全部订单</div>
                            <Icon type={rightsvg.id} style={{width:".3rem",height:".3rem",marginLeft:".05rem"}}/>
                        </Flex>
                    </Flex>
                    <Flex justify="around" align="end" className="completed">
                        <div className="badgee">
                            {data.noPayOrder!=0?<Badge text={data.noPayOrder} style={{ position: 'absolute', right: '-.85rem'}}/>:<Badge text={0} style={{ position: 'absolute'}}/> }
                            {/* <Badge text={data.noPayOrder} style={{ position: 'absolute', right: '-.4rem'}}> */}
                                <Flex justify="center" onClick={()=>{
                                    if(this.props.token!=null){
                                    this.props.dispatch(routerRedux.push({
                                        pathname: `/orderList/${1}`,
                                    }));}
                                }}>
                                    <Icon className="receivables" type={receivablessvg.id}/>
                                </Flex>
                                <div>待付款</div>
                            {/* </Badge> */}


                        </div>
                        <div className="badgee">
                            {data.noReceiveOrder !=0?<Badge text={data.noReceiveOrder } style={{ position: 'absolute', right: '-.85rem'}}/>:<Badge text={0 } style={{ position: 'absolute'}}/> }
                            <Flex justify="center" onClick={()=>{
                                if(this.props.token!=null){
                                this.props.dispatch(routerRedux.push({
                                    pathname: `/orderList/${2}`,
                                }));}
                            }}>
                                <Icon className="receive_goods" type={receive_goodssvg.id}/>
                            </Flex>
                            <div>待收货</div>
                        </div>
                        <div className="badgee">
                            {data.finishOrder !=0?<Badge text={ data.finishOrder } style={{ position: 'absolute', right: '-.85rem'}}/>:<Badge text={ 0 } style={{ position: 'absolute'}}/> }
                            <Flex justify="center" onClick={()=>{
                                if(this.props.token!=null){
                                this.props.dispatch(routerRedux.push({
                                    pathname: `/orderList/${3}`,
                                }));}
                            }}>
                                <Icon className="evaluated" type={evaluatedsvg.id}/>
                            </Flex>
                            <div>待评价</div>
                        </div>
                        <div onClick={()=>{
                            if(this.props.token!=null){
                            this.props.dispatch(routerRedux.push({
                                pathname:`/afterSale`
                            }))}
                        }} className="badgee">
                            {data.afterSale !=0?<Badge text={data.afterSale } style={{ position: 'absolute', right: '-.85rem'}}/>:<Badge text={0} style={{ position: 'absolute'}}/> }
                            <Flex justify="center">
                                <Icon className="customer" type={customersvg.id}/>
                            </Flex>
                            <div>售后管理</div>
                        </div>
                    </Flex>
                    <WhiteSpace size="sm"/>
                </WingBlank>
            </div>
        );
    }
}

export default connect(({ myOrder }) => ({ myOrder }))(MyOrder);
